<!DOCTYPE html>
<html>

<head>
    <title>Mask URL 调试工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .test-result {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ccc;
        }

        .success {
            background-color: #d4edda;
            border-color: #c3e6cb;
        }

        .error {
            background-color: #f8d7da;
            border-color: #f5c6cb;
        }

        .info {
            background-color: #d1ecf1;
            border-color: #bee5eb;
        }

        button {
            margin: 5px;
            padding: 10px;
        }

        input {
            width: 500px;
            padding: 5px;
        }
    </style>
</head>

<body>
    <h1>Mask URL 调试工具</h1>

    <div>
        <label>测试 Mask 路径:</label><br>
        <input type="text" id="maskPath" value="results/copd/seg_result/prostate_source_axial_LR_registered.nii.gz"
            placeholder="输入 mask 文件路径">
        <button onclick="testAllUrls()">测试所有可能的 URL</button>
    </div>

    <div id="results"></div>

    <script>
        const baseUrls = [
            'http://10.69.64.129:8000',
            'http://10.69.64.129:8000/api',
            'http://10.69.64.129:8000/static',
            'http://10.69.64.129:8000/files'
        ];

        async function testUrl(url) {
            const result = {
                url: url,
                accessible: false,
                status: null,
                error: null,
                headers: {}
            };

            try {
                const response = await fetch(url, { method: 'HEAD' });
                result.status = response.status;
                result.accessible = response.ok;
                result.headers = Object.fromEntries(response.headers.entries());
            } catch (error) {
                result.error = error.message;
            }

            return result;
        }

        async function testAllUrls() {
            const maskPath = document.getElementById('maskPath').value;
            const resultsDiv = document.getElementById('results');
            resultsDiv.innerHTML = '<div class="info">正在测试...</div>';

            const cleanPath = maskPath.startsWith('/') ? maskPath.slice(1) : maskPath;

            const urlsToTest = [
                ...baseUrls.map(base => `${base}/${cleanPath}`),
                // 如果路径已经包含 results，尝试去掉重复
                ...(cleanPath.startsWith('results/') ?
                    baseUrls.map(base => `${base}/${cleanPath.replace('results/', '')}`) : []),
                // 添加 results 前缀
                ...baseUrls.map(base => `${base}/results/${cleanPath.replace('results/', '')}`)
            ];

            const results = [];

            for (const url of urlsToTest) {
                console.log(`测试: ${url}`);
                const result = await testUrl(url);
                results.push(result);

                if (result.accessible) {
                    console.log(`✅ 成功: ${url}`);
                    break; // 找到第一个可用的就停止
                } else {
                    console.log(`❌ 失败: ${url} - ${result.status || result.error}`);
                }
            }

            // 显示结果
            resultsDiv.innerHTML = results.map(r => `
                <div class="test-result ${r.accessible ? 'success' : 'error'}">
                    <strong>${r.accessible ? '✅ 成功' : '❌ 失败'}</strong><br>
                    URL: ${r.url}<br>
                    状态: ${r.status || 'N/A'}<br>
                    ${r.error ? `错误: ${r.error}<br>` : ''}
                    ${r.accessible ? `内容类型: ${r.headers['content-type'] || 'N/A'}<br>文件大小: ${r.headers['content-length'] || 'N/A'} bytes` : ''}
                </div>
            `).join('');
        }

        // 页面加载时自动测试
        window.onload = () => testAllUrls();
    </script>
</body>

</html>